О разделе
CSS
В CSS тег используется как селектор по типу, например p color — black; .
Подключение и организация CSS-кода
Тег используется для подключения внешних ресурсов к HTML-документу. Наиболее распространённое применение — подключение CSS-файлов.
Переменные в CSS
Переменные в CSS — это именованные значения, которые хранят информацию для многократного использования в стилях веб-страницы. Эти величины обеспечивают централизованное управление стилями и сокращают…
Блочная модель и механизм каскадирования
Контентовая модель — это поведение по умолчанию для всех HTML-элементов. В этой модели свойства width и height определяют только размеры контентной области, то есть внутренней части элемента, где…
Типовые элементы интерфейса
Мы разберём различные примеры типовых элементов интерфейса, в формате HTML и CSS. Можете добавлять и экспериментировать - для удобства, в HTML-части будет создаваться элемент, а в CSS - стиль.
Flexbox и CSS Grid
Flexbox (Flexible Box Layout) — это модуль CSS, предоставляющий механизм эффективного распределения свободного пространства и выравнивания элементов в контейнере, ориентированном вдоль одной оси.…
Основные стили в CSS
Как работает CSS, как читать единицы измерения и планировать размещение.
Синтаксис и пунктуация в CSS
Апострофы — не являются частью синтаксиса CSS, но могут встречаться в строках (например, в content).
Псевдоклассы и псевдоэлементы
Псевдоклассы изначально записывались с одним двоеточием ( — hover), а псевдоэлементы — также с одним ( — before). В CSS3 был введён чёткий синтаксис — Псевдоклассы — одно двоеточие ( — nth-child, —…
Анимации, переходы и трансформации
transform — это свойство CSS, которое применяет геометрические преобразования к элементу — перемещение, поворот, масштабирование, наклон и другие трансформации. Эти изменения не влияют на поток…
Адаптивный и отзывчивый дизайн
Что такое адаптивность, как подстроиться под разные экраны.
Справочник по CSS
— Синтаксис — ? — Используется с animation-timeline — view() — Пример — animation-range — entry 0 cover 50 — Позволяет задавать диапазон прогресса анимации в зависимости от видимости.
Практика
В предыдущей главе мы создавали свой мини-проект - калькулятор на HTML, добавим стили с помощью CSS-файла, чтобы сделать калькулятор более привлекательным — создайте файл style.css и выведите стили…
Итоги
Основные категории стилей — Селекторы (классы, ID, атрибуты), Макеты (Flexbox, Grid), Адаптивность (медиа-запросы), Анимации и эффекты
Чек-лист самопроверки
Итоги и вопросы по теме Чек-лист самопроверки для самопроверки в энциклопедии Вселенная IT.
CSS — о разделе
Подборка материалов раздела CSS в энциклопедии Вселенная IT